---
import ExternalLinks from "@src/components/ExternalLinks.astro";
import ActiveLink from "@src/components/ActiveLink.astro";
import navigation from "@src/navigation.json";

import {buildGetPages, buildToc} from "@src/navigation-utils";

const {props} = Astro;
const {frontmatter = {}} = props;

const getPages = buildGetPages(await Astro.glob("../pages/**/*.mdx"));
let sidebarEnabled = false;
let toc = "";

const allPages = getPages();
for (const page of allPages) {
  if (page.file === frontmatter.file) {
    toc = buildToc(page);
    sidebarEnabled = toc !== "";
    break;
  }
}
---
<aside class="docs-sidebar sidebar">
  <ul class="mobile-navigation">
    <li><a href="/">Docs</a></li>
    <li><a href="/playground">Playground</a></li>
    <li><ActiveLink href="https://rome.tools/blog/">Blog</ActiveLink></li>
  </ul>

  <ExternalLinks />

  {navigation.order.map(id => {
    return <Fragment>
      <h2>{navigation.titles[id]}</h2>

      <ul class="navigation">
        {getPages(id).map((page) => {
          return <li><ActiveLink href={page.url}>{page.frontmatter.title}</ActiveLink></li>;
        })}
      </ul>
    </Fragment>;
  })}
</aside>
